<template>
  <div class="g-bd">
    <div class="u-title">热门新碟</div>
    <ul class="djilist">
      <li
        v-for="(item,index) in hotAlbum"
        :key="index"
      >
        <div
          class="cover"
          @click.prevent="goDetail(item.id)"
        >
          <a href="#"><img v-lazy="item.blurPicUrl"></a>
          <a
            href="#"
            class="bg"
          ></a>
          <i class="iconfont icon-bofang"></i>
        </div>
        <p
          class="p1 f-thide"
          @click.prevent="goDetail(item.id)"
        >{{item.name}}</p>
        <p
          class="p2 f-thide"
          @click.prevent="goArtDetail(item.artists[0].id)"
        ><span>{{item.artists[0].name}}</span></p>
        <!-- <p class="p2"><span
            v-for="(i,index2) in item.artists"
            :key="index2"
          >{{i.name}}<span v-show="index!==item.artists.length-1">/</span></span></p> -->
      </li>
    </ul>

    <div class="u-title">
      <p>全部新碟</p>
      <div class="tab">
        <span
          class="cart"
          v-for="(item,index) in cart"
          :key="index"
        >
          <a
            href="javascript:;"
            @click.prevent="gocartAlb(item.area)"
          >{{item.name}}</a>
          <span>|</span>
        </span>
      </div>
    </div>
    <ul class="djilist">
      <li
        v-for="(item,index) in allAlbum"
        :key="index"
      >
        <div
          class="cover"
          @click.prevent="goDetail(item.id)"
        >
          <a href="#"><img v-lazy="item.blurPicUrl"></a>
          <a
            href="#"
            class="bg"
          ></a>
          <i class="iconfont icon-bofang"></i>
        </div>

        <p
          class="p1 f-thide"
          @click.prevent="goDetail(item.id)"
        >{{item.name}}</p>
        <p
          class="p2 f-thide"
          @click.prevent="goArtDetail(item.artists[0].id)"
        ><span>{{item.artists[0].name}}</span></p>
        <!-- <p class="p2"><span
            v-for="(i,index2) in item.artists"
            :key="index2"
          >{{i.name}}<span v-show="index2!==item.artists.length-1">/</span></span></p> -->
      </li>
    </ul>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="35"
      :total="1200"
      :current-page="nowpage"
      prev-text="< 上一页"
      next-text="下一页 >"
      @current-change="changepage"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      cart: [
        { name: '全部', area: 'ALL' },
        { name: '华语', area: 'ZH' },
        { name: '欧美', area: 'EA' },
        { name: '韩国', area: 'KR' },
        { name: '日本', area: 'JP' },
      ],
      nowArea: 'All',
      hotAlbum: [],
      allAlbum: [],
      // 当前页数
      nowpage: 1,
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      let res = await axios.get('https://autumnfish.cn//album/newest')
      // console.log(res)
      this.hotAlbum = res.data.albums.slice(0, 10)

      let ofst = (this.nowpage - 1) * 35
      let reser = await axios.get('https://autumnfish.cn//album/new?area=' + this.nowArea + '&limit=35&offset=' + ofst)
      // console.log(reser)
      this.allAlbum = reser.data.albums
    },
    // 改变地区
    gocartAlb (are) {
      this.nowArea = are;
      this.getInfo()
    },
    // 改变页数
    changepage (val) {
      this.nowpage = val;
      this.getInfo()
    },
    goDetail (id) {
      // 跳转到这个详情页
      // console.log('id:', id)
      this.$router.push({ path: '/album', query: { id: id } })
    },
    goArtDetail (id) {
      // console.log(id)
      this.$router.push({ path: '/artist', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
.g-bd {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  padding: 40px;
  margin-bottom: 30px;
  .u-title {
    border-bottom: 2px solid #c20c0c;
    height: 33px;
    font-size: 20px;
    line-height: 28px;
    p {
      float: left;
    }
    .tab {
      margin-left: 20px;
      float: left;
      .cart {
        a {
          font-size: 12px;
          color: #666;
        }
        a:hover {
          text-decoration: underline;
        }
        span {
          margin: 0 10px;
          color: #c7c7c7;
          font-size: 12px;
        }
      }
    }
  }
  .djilist {
    margin: 16px 0 0 -37px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    li {
      width: 150px;
      margin-left: 37px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: left;
      margin-bottom: 30px;
      .cover {
        width: 130px;
        height: 130px;
        position: relative;
        a {
          display: block;
          width: 130px;
          height: 130px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 153px;
          height: 130px;
          background-image: url(../../../assets/image/coverall.png);
          background-position: 0 -845px;
        }
        .iconfont {
          position: absolute;
          right: 5px;
          bottom: 5px;
          font-size: 27px;
          color: #747474;
          display: none;
        }
      }
      .cover:hover {
        .iconfont {
          display: inline-block;
        }
        .iconfont:hover {
          color: #2f2f2f;
        }
      }
      p:hover {
        cursor: pointer;
        text-decoration: underline;
      }
      .p1 {
        margin: 13px 0 6px;
        line-height: 16px;
        font-size: 14px;
      }
      .p2 {
        height: 16px;
        line-height: 18px;
        color: #999;
        font-size: 12px;
      }
    }
  }
}
</style>
